.stat-chart {
    position: relative;
    height: 0px;
    overflow: hidden;
    text-align: right;
}
.stat-chart.show {
    border-top: 1px dotted #ebebeb;
}
.stat-chart canvas {
    position: absolute;
    width: 480px;
    height: 160px;
    left: 50%;
    top: 20px;
    margin-left: -240px;
    visibility: hidden;
}
.stat-chart canvas.show {
    visibility: visible;
}
.stat-chart .chart-info {
    position: absolute;
    bottom: 25px;
    left: 50%;
    margin-left: 360px;
    color: #777;
    font-size: 0.9em;
}
.stat-chart .chart-info p {
    margin-bottom: 0px;
}
.stat-chart .chart-info .total {
    font-size: 28px;
}

.d-h .total {
    color: #009cde;
}
.u-h .total {
    color: #b48ead;
}
.d-d .total {
    color: #a3be8c;
}
.u-d .total {
    color: #ebcb8b;
}